<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList" bgColor="#F8F8F8" :auto="false">
    <template #top>
      <uv-navbar placeholder title="优惠劵" :autoBack="true"></uv-navbar>
      <view class="tabs">
        <uv-tabs :current="dataRef.current" :scrollable="false" :list="formData.list" @change="getTabs"
          :activeStyle="formData.activeStyle" :inactiveStyle="inactiveStyle" lineColor="#1E1E1E"></uv-tabs>
      </view>
    </template>
    <view class="box p-b-32">
      <view class="m-t-32">
        <view class="couponList p-32 m-b-20" v-for="(item, index) in dataList" :key="index">
          <view>
            <view class="flex align-ali">
              <view>
                <uv-image :src="item.image" width="128rpx" height="128rpx"></uv-image>
              </view>
              <view class="m-l-32"> 
                <view class="font-32 text-ellipsis">
                  {{ item.name }}
                </view>
                <view class="font-22 text-greey m-t-30" v-if="dataRef.current == 1">
                  有效期: {{ timeFormat(item.coupon_start_time, 'yyyy.mm.dd') }}-{{
                    timeFormat(item.coupon_end_time, 'yyyy.mm.dd')
                  }} 
                </view>
				<view class="font-22 text-greey m-t-30" v-else>
				  有效期: 领取后{{item.valid_day}}天内有效
				</view>
              </view>
              <view class="m-l-auto" v-if="dataRef.current == 0" @click="receiveCoupons(item)">
                <dy-button width="140rpx" height="60rpx" f_size="24rpx">{{ ['待领取', '已领取',
                  '已使用'][item.coupon_status
                  -
                  1]
                }}</dy-button>
              </view>
              <view class=" m-l-auto" v-else @click="useCoupons(item)">
                <dy-button width="140rpx" height="60rpx" :plain="item.use_status == 1"
                  :btn_bg="item.use_status != 1 ? '#EBEBEB' : '#942222'"
                  :f_color="item.use_status != 1 ? '#999999' : '#830102'" f_size="24rpx">{{
                    ['不可使用',
                      '去使用', '已使用', '已失效'][item.use_status]
                  }}</dy-button>
              </view>
            </view>
            <view class="describe m-t-42 text-greey font-24 p-t-18">
              说明：满{{ item.use_limit / 100 }}元可用
            </view>
          </view>
        </view>

      </view>
    </view>
  </z-paging>
</template>

<script setup>
import {
  myCoupon,
  receiveCoupon
} from '@/api/api';
import {
  ref,
  onMounted,
  reactive
} from 'vue';
import {
  useStore
} from 'vuex';
import {
  onReachBottom,
  onShow,
  onReady,
  onLoad
} from '@dcloudio/uni-app';
import route from '@/uni_modules/uv-ui-tools/libs/util/route.js';
import {
  timeFormat
} from '@/uni_modules/uv-ui-tools/libs/function/index.js';
const select = ref(null); //选中优惠劵  是否从选择优惠劵跳转
const paging = ref(null);
const dataList = ref([]);
const diyId = ref([]) //AIYID
const morenyNumber = ref(null) //总价
const dataRef = ref({
  current: 0,
})
const formData = reactive({
  list: [{
    name: '可领取',
  },
  {
    name: '我的',
  }
  ],
  activeStyle: {
    'font-family': 'Source Han Sans CN',
    'font-weight': '700',
    'font-size': '32rpx',
  },
  inactiveStyle: {
    'font-family': 'Source Han Sans CN',
    'font-weight': '500',
    'font-size': '32rpx',
    'color': '#999'
  }
})
onShow(() => {
  setTimeout(() => {
    paging.value.reload()
  }, 100)
})
onLoad((options) => {
  if (options.current) {
    dataRef.value.current = options.current
  }
  if (options.select) {
    select.value = options.select;
  }
  if (options.diyId) {
    diyId.value.push(...JSON.parse(options.diyId));
    console.log(diyId.value, '--------');

  }
  if (options.morenyNumber) {
    morenyNumber.value = options.morenyNumber;
  }
})
const getTabs = (e) => {
  dataRef.value.current = e.index
  paging.value.reload()
}
const queryList = (page, limit) => {
  myCoupon({
    page,
    limit,
    mode: Number(dataRef.value.current) + 1,
    material_list: diyId.value,
    money: morenyNumber.value
  }).then(res => {
    res.data.data = res.data.data.filter(item => item.receive_limit !== item.user_revice_count)
    paging.value.complete(res.data.data);
  })
};
//领取优惠券
const receiveCoupons = (item) => {
  // 1可领取
  if (item.coupon_status == 1) {
    receiveCoupon({
      coupon_id: item.id
    }).then(res => {
      console.log(res);
      if (res.code == 1) {

        paging.value.reload()
      }
      uni.showToast({
        title: res.msg,
        icon: 'none'
      })
    })
  }
}
//使用优惠券
const useCoupons = (item) => {
  // console.log(item);
  if (item.use_status != 1) {
    return uni.showToast({
      title: '不可使用',
      icon: 'none'
    })
  }
  if (select.value) {
    uni.navigateBack()
    uni.$emit('getCoupon', item)
  } else {
    route({
      type: 'switchTab',
      url: 'pages/mall/mall',
    })
  }
}
</script>

<style lang="scss">
.box {
  // min-height: 100vh;
  background: #f8f8f8;
}

.tabs {
  background: #FFF;
}

.couponList {
  width: 686rpx;
  margin: 0 auto;
  background: #FFF;
  border-radius: 12rpx;

  .receive {
    width: 136rpx;
    height: 56rpx;
    background: #830102;
    color: #FFFFFF;
    text-align: center;
    line-height: 56rpx;
    border-radius: 12rpx;
  }

  .goueslin {
    width: 136rpx;
    height: 56rpx;
    text-align: center;
    line-height: 56rpx;
    border: 2rpx solid #830102;
    color: #830102;
    border-radius: 12rpx;
  }

  .useStatus {
    background: #E5E5E5;
    color: #333;
    border: none;
  }

  .useStatus1 {}

  .describe {
    border-top: 2rpx dashed #E5E5E5;
  }
}

.text-ellipsis {
  width: 320rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>